<template>
    <f7-page class="page-userinfo">
        <f7-navbar>
            <f7-nav-left back-link=" " sliding></f7-nav-left>
            <f7-nav-center>填写个人资料</f7-nav-center>
            <f7-nav-right>
                <f7-link href="/register/success/">跳过此步骤</f7-link>
            </f7-nav-right>
        </f7-navbar>
        <div class="main">
            <f7-list form>
                <f7-list-item>
                    <f7-label>头像</f7-label>
                    <div class="uploder">
                        <f7-link icon-fa="plus-circle"></f7-link>
                    </div>
                </f7-list-item>
                <f7-list-item>
                    <f7-label>昵称 <span class="required">*</span></f7-label>
                    <f7-input type="text" value="老王同志" placeholder="请填写昵称"></f7-input>
                </f7-list-item>
                <f7-list-item>
                    <f7-label>性别</f7-label>
                    <f7-input type="select" value="0">
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </f7-input>
                </f7-list-item>
                <f7-list-item>
                    <f7-label>所在地</f7-label>
                    <f7-input type="text" value="福建 福州" placeholder="请选择所在地" readonly @click="openLocationPicker" id="location"></f7-input>
                </f7-list-item>
                <f7-list-item class="intro">
                    <f7-label>简介</f7-label>
                    <f7-input type="textarea" value="老王同志" placeholder="请填写简介"></f7-input>
                </f7-list-item>
                <f7-list-item>
                    <f7-label>出生年月</f7-label>
                    <f7-input type="text" value="1995-08-09" placeholder="请选择出生日期" readonly @click="openBirthdayPicker" id="birthday"></f7-input>
                </f7-list-item>
                <f7-list-item>
                    <f7-label>注册时间</f7-label>
                    <f7-input type="text" value="2017-08-09" disabled></f7-input>
                </f7-list-item>
            </f7-list>
        </div>
    </f7-page>
</template>

<style lang="scss">
.page-userinfo {
    .uploder {
        width: 100%;
        padding-left: 5px;
    }

    .required {
        color: #f00;
    }
}
</style>

<script>
export default {
    data() {
        return {
            locationPicker: null,
            birthdayPicker: null
        }
    },
    mounted() {
        this.initLocationPicker()
        this.initBirthdayPicker()
    },
    methods: {
        // 所在地选择器初始化
        initLocationPicker() {
            this.locationPicker = this.$f7.picker({
                input: '#location',
                toolbarCloseText: '完成',
                rotateEffect: true,
                cols: [
                    {
                        textAlign: "center",
                        values: [ '福建', '浙江']
                    }, {
                        textAlign: "center",
                        values: [ '福州', '漳州']
                    }
                ]
            })
        },
        // 出生日期选择器初始化
        initBirthdayPicker() {
            var years = [],
                months = [],
                days = []

            for(var i = parseInt(new Date().getFullYear()); i >= 1970; i--) {
                years.push(i)
            }

            for(var i = 1; i <= 12; i++) {
                if (i < 10) {
                    months.push('0' + i)
                } else {
                    months.push(i)
                }
            }

            for(var i = 1; i <= 31; i++) {
                if (i < 10) {
                    days.push('0' + i)
                } else {
                    days.push(i)
                }
            }

            this.birthdayPicker = this.$f7.picker({
                input: '#birthday',
                toolbarCloseText: '完成',
                rotateEffect: true,
                cols: [
                    {
                        textAlign: "center",
                        values: years
                    },
                    {
                        textAlign: "center",
                        values: months
                    },
                    {
                        textAlign: "center",
                        values: days
                    }
                ],
                formatValue: function(values, displayValues) {
                    return displayValues[0] + '-' + displayValues[1] + '-' + displayValues[2]
                }
            })
        },
        //  所在地选择
        openLocationPicker() {
            this.locationPicker.open()
        },

        // 出生日期选择
        openBirthdayPicker() {
            this.birthdayPicker.open()
        }
    }
};
</script>
